<template>
  <!-- <button class="draw" @click="draw()">绘制</button> -->


  <el-container>

    <div v-if="false" style=" position: fixed;

            width: 100%;
            right: 0;
            bottom: 0;
            z-index: 999;//一直将导航栏置于最顶层
            background-color: white; //设置导航栏背景颜色"
    >
      <el-header>
        <div>
          <el-row style="text-align: center;">
            <el-col :span="24">
              <el-menu
                router="router"
                class="el-menu-demo"
                style="position:static;"
                mode="horizontal"
              >
                <el-row>
                  <el-col :span="2">
                    <el-menu-item @click="flushQuestion()">
                      <template slot="title">获取一个</template>
                      <!--                      <el-button @click="flushQuestion()" type="primary">获取一个</el-button>-->
                    </el-menu-item>
                  </el-col>
                  <el-col :span="4">
                    <el-menu-item @click="showAnswer">
                      <template slot="title">查看回答</template>
                    </el-menu-item>
                  </el-col>
                  <el-col :span="4">
                    <el-menu-item @click="notShowAgain">
                      <template slot="title">不再显示</template>
                    </el-menu-item>
                  </el-col>
                  <el-col :span="4">
                    <el-menu-item @click="refreshQuantity">
                      <template slot="title">重来</template>
                    </el-menu-item>
                  </el-col>
                  <el-col :span="2">
                    <el-menu-item index="3" disabled>视频</el-menu-item>
                  </el-col>
                  <el-col :span="2">
                    <el-menu-item>剩余：{{ remainingQuantity }}</el-menu-item>
                  </el-col>
                  <el-col :span="4">
                    <el-menu-item index="3" disabled="">
                      占个位子
                    </el-menu-item>
                  </el-col>
                  <el-col :span="2">
                    <el-menu-item index="3" disabled>占个位子</el-menu-item>
                  </el-col>
                </el-row>
              </el-menu>
            </el-col>
            <!--            <el-col :span="2">-->
            <!--1111-->
            <!--            </el-col>-->
          </el-row>
        </div>
      </el-header>
    </div>

    <el-main style="margin: 0px">
      <el-header padding="0px">
        <el-badge :value="remainingQuantity" class="item">
          <el-button @click="flushQuestion()" type="primary">获取一个</el-button>
        </el-badge>
        <el-button @click="showAnswer()" type="primary">查看回答</el-button>
        <!--        <el-button @click="submitForScoring()" type="primary">提交评分</el-button>-->
        <el-button @click="notShowAgain()" type="primary">不再显示</el-button>
        <el-button @click="refreshQuantity()" type="primary">重新生成</el-button>
        <el-radio-group v-model="direction">
        </el-radio-group>
      </el-header>
      <div>
        <span class="titleSpan">{{ randomQuestion.title }}</span>
      </div>
      <el-divider></el-divider>
      <div>
        <el-form :label-position="labelPosition" label-width="80px" :model="question">
          <el-form-item label="是什么呢：">
            <el-input
              type="textarea"
              :rows="8"
              placeholder="请输入内容"
              v-model="answers"
            >
            </el-input>
          </el-form-item>
          <el-divider></el-divider>
          <div v-show="isShowAnswer">
            <el-form-item label="参考答案：">
              <div v-html="randomQuestion.content "></div>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-main>
  </el-container>

</template>

<script>
import * as note from '@/api/note/note'
import {Base64} from 'js-base64'

export default {
  name: 'RandomTesting',
  data() {
    return {
      drawer: false,
      isShowAnswer: false,
      direction: 'ltr',
      labelPosition: 'top',
      submitLoading: false,
      // 剩余数量
      remainingQuantity: 0,
      compilationId: '',
      question: {
        title: null,
        answer: null,
        type: null,
        questionType: null
      },
      typeOptions: [{
        value: '1',
        label: '其他'
      }],
      questionTypeOptions: [{
        value: '1',
        label: '基础'
      }, {
        value: '2',
        label: '中等'
      }, {
        value: '3',
        label: '基础'
      }],
      value: '0',
      randomQuestion: {},
      answers: null
    }
  },
  mounted: function () {
    this.flushQuestion()
  },
  created() {
    const compilationId = this.$route.query.compilationId
    if (compilationId) {
      this.compilationId = compilationId
    }

  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭，所填内容会消失哦？')
        .then(_ => {
          this.question = {}
          done()
        })
        .catch(_ => {
        })
    },
    async flushQuestion() {
      //启动加载页面
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let resData = (await note.randomOne(this.compilationId)).data
      if (resData.content) {
        resData.content = Base64.decode(resData.content)
      }
      this.randomQuestion = resData
      this.isShowAnswer = false
      this.answers = ''
      loading.close()
      this.getRemainingQuantity(this.compilationId)
    },
    //重新载入、、、刷新题库
    refreshQuantity() {
      note.refreshQuantity(this.compilationId).then(res => {
        this.flushQuestion()
      })
    },
    showAnswer() {
      this.isShowAnswer = !this.isShowAnswer
    },
    getRemainingQuantity(compilationId) {
      note.getRemainingQuantity(compilationId).then((e) => {
        this.remainingQuantity = e.data
      })
    },
    async notShowAgain() {

      this.$confirm('确定不再显示：' + this.randomQuestion.title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(1233333)
        note.notShowAgain(this.randomQuestion.id).then(e => {
          this.$message({
            type: 'success',
            message: '屏蔽完成!'
          })
        })
      }).catch(() => {

      })

    },
    async submitForScoring() {
      if (this.answers == null || this.answers === '') {
        this.$message({
          message: '请输入解答思路...',
          type: 'warning'
        })
        return
      }
      let resData = await note.compareSimilarDegree({strA: this.randomQuestion.content, strB: this.answers})
      await this.$msgbox({
        title: '消息',
        message: '相似度===>>>' + resData.data,
        confirmButtonText: '确定',
        beforeClose: (action, instance, done) => {
          done()
        }
      })
    }
  }

}
</script>

<style scoped>
.titleSpan {
  font-size: 30px;
  text-align: center;
  display: block;
  background-color: #23EE7AFF
}

.element.style {
  height: 0px
}

.el-heade {
  padding: 0px
}

.el-button + .el-button, .el-checkbox.is-bordered + .el-checkbox.is-bordered {

}

.item {
  margin-right: 10px;
}
</style>
